<!doctype html>



  


<html class="theme-next muse use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"/>




  <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">



<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=0.5.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="博客，文章," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=0.5.0" />






<meta name="description" content="2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
一.Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
123.box{  display: flex;}

行内元素也可">
<meta property="og:type" content="article">
<meta property="og:title" content="Flex布局 以及React Native中相关知识点">
<meta property="og:url" content="http://www.dr17.me/2016/02/16/Flex/">
<meta property="og:site_name" content="天生DR">
<meta property="og:description" content="2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
一.Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
123.box{  display: flex;}

行内元素也可">
<meta property="og:image" content="../images/flex001.png">
<meta property="og:image" content="../images/flex002.png">
<meta property="og:image" content="../images/flex003.png">
<meta property="og:image" content="../images/flex004.png">
<meta property="og:image" content="../images/flex005.jpg">
<meta property="og:image" content="../images/flex006.jpg">
<meta property="og:image" content="../images/flex007.png">
<meta property="og:image" content="../images/flex008.png">
<meta property="og:image" content="../images/flex009.png">
<meta property="og:image" content="../images/flex010.png">
<meta property="og:image" content="../images/flex011.png">
<meta property="og:image" content="../images/flex012.jpg">
<meta property="og:image" content="../images/flex013.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Flex布局 以及React Native中相关知识点">
<meta name="twitter:description" content="2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
一.Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
123.box{  display: flex;}

行内元素也可">




<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: 0,
      author: 'Author'
    }
  };
</script>

  <title> Flex布局 以及React Native中相关知识点 | 天生DR </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="">

  








  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">天生DR</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">当上帝亲吻大地的时候于是DR出现了 他是上帝赐予人类最好的礼物</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu ">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-home fa-fw"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-archive fa-fw"></i> <br />
            
            Archives
          </a>
        </li>
      

      
      
      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                Flex布局 以及React Native中相关知识点
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2016-02-16T15:56:29+08:00" content="Feb 16 2016">
              Feb 16 2016
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/React-JS/" itemprop="url" rel="index">
                    <span itemprop="name">React JS</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      
        <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
          
          
            <div class="post-gallery-row">
              <a class="post-gallery-img fancybox"
                 href="/../images/flex001.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex001.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex002.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex002.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex003.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex003.png" itemprop="contentUrl"/>
              </a>
            </div>
          
            <div class="post-gallery-row">
              <a class="post-gallery-img fancybox"
                 href="/../images/flex004.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex004.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex005.jpg" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex005.jpg" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex006.jpg" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex006.jpg" itemprop="contentUrl"/>
              </a>
            </div>
          
            <div class="post-gallery-row">
              <a class="post-gallery-img fancybox"
                 href="/../images/flex007.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex007.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex008.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex008.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex009.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex009.png" itemprop="contentUrl"/>
              </a>
            </div>
          
            <div class="post-gallery-row">
              <a class="post-gallery-img fancybox"
                 href="/../images/flex010.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex010.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex011.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex011.png" itemprop="contentUrl"/>
              </a>
            
          
            
              <a class="post-gallery-img fancybox"
                 href="/../images/flex012.jpg" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex012.jpg" itemprop="contentUrl"/>
              </a>
            </div>
          
            <div class="post-gallery-row">
              <a class="post-gallery-img fancybox"
                 href="/../images/flex013.png" rel="gallery_ryokn4q6fxt0dmvw"
                 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                <img src="/../images/flex013.png" itemprop="contentUrl"/>
              </a>
            
          

          
          </div>
        </div>
      

      
        <p>2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
<h3 id="一-Flex布局是什么？">一.Flex布局是什么？</h3>
<hr>
<p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。<br>任何一个容器都可以指定为Flex布局。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> flex</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>行内元素也可以使用Flex布局。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> inline-flex</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>Webkit内核的浏览器，必须加上-webkit前缀。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> -webkit-flex</span></span>; <span class="comment">/* Safari */</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> flex</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p>
<h3 id="二、基本概念">二、基本概念</h3>
<hr>
<p>采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。</p>
<p><img src="../images/flex001.png" alt="flex001"></p>
<p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。<br>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</p>
<h3 id="三、容器的属性">三、容器的属性</h3>
<hr>
<p>以下6个属性设置在容器上。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="attribute">flex-direction</span></div><div class="line"><span class="attribute">flex-wrap</span></div><div class="line"><span class="attribute">flex-flow</span></div><div class="line"><span class="attribute">justify-content</span></div><div class="line"><span class="attribute">align-items</span></div><div class="line"><span class="attribute">align-content</span></div></pre></td></tr></table></figure>

<h4 id="3-1_flex-direction属性">3.1 flex-direction属性</h4>
<p><code>flex-direction</code>属性决定主轴的方向（即项目的排列方向）。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-direction</span>:<span class="value"> row | row-reverse | column | column-reverse</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex002.png" alt="flex002"></p>
<p>它可能有4个值。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">row（默认值）：主轴为水平方向，起点在左端。</div><div class="line">row-<span class="built_in">reverse</span>：主轴为水平方向，起点在右端。</div><div class="line">column：主轴为垂直方向，起点在上沿。</div><div class="line">column-<span class="built_in">reverse</span>：主轴为垂直方向，起点在下沿。</div></pre></td></tr></table></figure>

<h4 id="3-2_flex-wrap属性">3.2 flex-wrap属性</h4>
<p>默认情况下，项目都排在一条线（又称”轴线”）上。<code>flex-wrap</code>属性定义，如果一条轴线排不下，如何换行。</p>
<p><img src="../images/flex003.png" alt="flex003"></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-wrap</span>:<span class="value"> nowrap | wrap | wrap-reverse</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>它可能取三个值。<br>（1）<code>nowrap</code>（默认）：不换行。</p>
<p><img src="../images/flex004.png" alt="flex004"></p>
<p>（2）<code>wrap</code> ：换行，第一行在上方。</p>
<p><img src="../images/flex005.jpg" alt="flex005"></p>
<p>（3）<code>wrap-reverse</code>：换行，第一行在下方。</p>
<p><img src="../images/flex006.jpg" alt="flex006"></p>
<h4 id="3-3_flex-flow">3.3 flex-flow</h4>
<p><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span> <span class="rules">{  <span class="rule"><span class="attribute">flex-flow</span>:<span class="value"> &lt;flex-direction&gt; || &lt;flex-wrap&gt;</span></span>;</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<h4 id="3-4_justify-content属性">3.4 justify-content属性</h4>
<p><code>justify-content</code>属性定义了项目在主轴上的对齐方式</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.box {</div><div class="line">  justify-content: flex-<span class="operator"><span class="keyword">start</span> | flex-<span class="keyword">end</span> | center | <span class="keyword">space</span>-<span class="keyword">between</span> | <span class="keyword">space</span>-around;</span></div><div class="line">}</div></pre></td></tr></table></figure>

<p><img src="../images/flex007.png" alt="flex007"></p>
<p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">flex-<span class="operator"><span class="keyword">start</span>（默认值）：左对齐</span></div><div class="line">flex-<span class="keyword">end</span>：右对齐</div><div class="line">center： 居中</div><div class="line"><span class="keyword">space</span>-<span class="keyword">between</span>：两端对齐，项目之间的间隔都相等。</div><div class="line"><span class="keyword">space</span>-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</div></pre></td></tr></table></figure>

<h4 id="3-5_align-items属性">3.5 align-items属性</h4>
<p><code>align-items</code>属性定义项目在交叉轴上如何对齐。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">fel</span><span class="class">.box</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">align-items</span>:<span class="value"> flex-start | flex-end | center | baseline | stretch</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex008.png" alt="flex008"></p>
<p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="attribute">flex</span>-start：交叉轴的起点对齐。</div><div class="line"><span class="attribute">flex</span>-end：交叉轴的终点对齐。</div><div class="line"><span class="value">center</span>：交叉轴的中点对齐。</div><div class="line"><span class="value">baseline</span><span class="value">: 项目的第一行文字的基线对齐。</span></div><div class="line">stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</div></pre></td></tr></table></figure>

<h4 id="3-6_align-content属性">3.6 align-content属性</h4>
<p><code>align-content</code> 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.box {</div><div class="line">  align-content: flex-<span class="operator"><span class="keyword">start</span> | flex-<span class="keyword">end</span> | center | <span class="keyword">space</span>-<span class="keyword">between</span> | <span class="keyword">space</span>-around | stretch;</span></div><div class="line">}</div></pre></td></tr></table></figure>

<p><img src="../images/flex009.png" alt="flex009"><br>该属性可能取6个值。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="bullet">* </span>flex-start：与交叉轴的起点对齐。</div><div class="line"><span class="bullet">* </span>flex-end：与交叉轴的终点对齐。</div><div class="line"><span class="bullet">* </span>center：与交叉轴的中点对齐。</div><div class="line"><span class="bullet">* </span>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</div><div class="line"><span class="bullet">* </span>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</div><div class="line"><span class="bullet">* </span>stretch（默认值）：轴线占满整个交叉轴。</div></pre></td></tr></table></figure>

<h3 id="四、项目的属性">四、项目的属性</h3>
<hr>
<p><code>flex-grow</code>属性定义项目的放大比例，默认为<code>0</code>，即如果存在剩余空间，也不放大。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"> <span class="attribute">order</span></div><div class="line"> <span class="attribute">flex-grow</span></div><div class="line"> <span class="attribute">flex-shrink</span></div><div class="line"> <span class="attribute">flex-basis</span></div><div class="line"> <span class="attribute">flex</span></div><div class="line"> <span class="attribute">align-self</span></div><div class="line">}</div></pre></td></tr></table></figure>

<h4 id="4-1_order属性">4.1 order属性</h4>
<hr>
<p><code>order</code>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">order</span>:<span class="value"> &lt;integer&gt;</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex010.png" alt="flex010"></p>
<h4 id="4-2_flex-grow属性">4.2 flex-grow属性</h4>
<hr>
<p><code>flex-grow</code>属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-grow</span>:<span class="value"> &lt;number&gt;</span></span>; <span class="comment">/* default 0 */</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex011.png" alt="flex011"></p>
<p>如果所有项目的<code>flex-grow</code>属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的<code>flex-grow</code>属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
<h4 id="4-3_flex-shrink属性">4.3 flex-shrink属性</h4>
<hr>
<p><code>flex-shrink</code>属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-shrink</span>:<span class="value"> &lt;number&gt;</span></span>; <span class="comment">/* default 1 */</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex012.jpg" alt="flex012"></p>
<p>如果所有项目的<code>flex-shrink</code>属性都为1，当空间不足时，都将等比例缩小。如果一个项目的<code>flex-shrink</code>属性为0，其他项目都为1，则空间不足时，前者不缩小。<br>负值对该属性无效。</p>
<h4 id="4-4_flex-basis属性">4.4 flex-basis属性</h4>
<hr>
<p><code>flex-basis</code>属性定义了在分配多余空间之前，项目占据的主轴空间<code>（main size）</code>。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为<code>auto</code>，即项目的本来大小。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-basis</span>:<span class="value"> &lt;length&gt; | auto</span></span>; <span class="comment">/* default auto */</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>它可以设为跟<code>width</code>或<code>height</code>属性一样的值（比如350px），则项目将占据固定空间。</p>
<h4 id="4-5_flex属性">4.5 flex属性</h4>
<hr>
<p><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为<code>0 1 auto</code>。后两个属性可选。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex</span>:<span class="value"> none | [ &lt;<span class="string">'flex-grow'</span>&gt; &lt;<span class="string">'flex-shrink'</span>&gt;? || &lt;<span class="string">'flex-basis'</span>&gt; ]</span></span></div><div class="line">}</div></pre></td></tr></table></figure>

<p>该属性有两个快捷值：<code>auto (1 1 auto)</code> 和 <code>none (0 0 auto)</code>。<br>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
<h4 id="4-6_align-self属性">4.6 align-self属性</h4>
<hr>
<p><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为<code>auto</code>，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于<code>stretch</code>。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">align-self</span>:<span class="value"> auto | flex-start | flex-end | center | baseline | stretch</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex013.png" alt="flex013"></p>
<p>该属性可能取6个值，除了<code>auto</code>，其他都与<code>align-items</code>属性完全一致。<br>（完）<br>注：以上均来自阮一峰的博客，这里只是做了搬运工，并无任何修改 原文链接如下<br><a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="external">阮一峰博客</a></p>
<hr>
<h2 id="我是分割线">我是分割线</h2>
<h3 id="React_Native中Flex布局">React Native中Flex布局</h3>
<p>React Native 的flex布局，是web的阉割版本，目前还不支持<br><code>flex-shrink</code>、<code>flex-basis</code>、<code>order</code>几种flex属性，同时现有支持的flex属性值也不全。</p>
<p>以后在开发过程当中会及时补充…….</p>

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/博客，文章/" rel="tag">#博客，文章</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/02/15/mobile_px_ppi/" rel="next" title="移动开发像素之谜">
                <i class="fa fa-chevron-left"></i> 移动开发像素之谜
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/02/17/React_Native_iOS_Pt/" rel="prev" title="React Native 中宽度单位">
                React Native 中宽度单位 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            Overview
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="http://7u2ibm.com1.z0.glb.clouddn.com/avatar.png"
               alt="窦静轩" />
          <p class="site-author-name" itemprop="name">窦静轩</p>
          <p class="site-description motion-element" itemprop="description">我跑啊跑啊跑 为的就是赶上那个被寄予厚望的自己</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">15</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>
          
          
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">12</span>
                <span class="site-state-item-name">categories</span>
              
            </div>
          

          
            <div class="site-state-item site-state-tags">
              
                <span class="site-state-item-count">1</span>
                <span class="site-state-item-name">tags</span>
              
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        <div class="links-of-author motion-element">
          
        </div>

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc-indicator-top post-toc-indicator">
            <i class="fa fa-angle-double-up"></i>
          </div>
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#一-Flex布局是什么？"><span class="nav-number">1.</span> <span class="nav-text">一.Flex布局是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#二、基本概念"><span class="nav-number">2.</span> <span class="nav-text">二、基本概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#三、容器的属性"><span class="nav-number">3.</span> <span class="nav-text">三、容器的属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-1_flex-direction属性"><span class="nav-number">3.1.</span> <span class="nav-text">3.1 flex-direction属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2_flex-wrap属性"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 flex-wrap属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-3_flex-flow"><span class="nav-number">3.3.</span> <span class="nav-text">3.3 flex-flow</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-4_justify-content属性"><span class="nav-number">3.4.</span> <span class="nav-text">3.4 justify-content属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-5_align-items属性"><span class="nav-number">3.5.</span> <span class="nav-text">3.5 align-items属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-6_align-content属性"><span class="nav-number">3.6.</span> <span class="nav-text">3.6 align-content属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#四、项目的属性"><span class="nav-number">4.</span> <span class="nav-text">四、项目的属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#4-1_order属性"><span class="nav-number">4.1.</span> <span class="nav-text">4.1 order属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-2_flex-grow属性"><span class="nav-number">4.2.</span> <span class="nav-text">4.2 flex-grow属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-3_flex-shrink属性"><span class="nav-number">4.3.</span> <span class="nav-text">4.3 flex-shrink属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-4_flex-basis属性"><span class="nav-number">4.4.</span> <span class="nav-text">4.4 flex-basis属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-5_flex属性"><span class="nav-number">4.5.</span> <span class="nav-text">4.5 flex属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-6_align-self属性"><span class="nav-number">4.6.</span> <span class="nav-text">4.6 align-self属性</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#我是分割线"><span class="nav-number"></span> <span class="nav-text">我是分割线</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#React_Native中Flex布局"><span class="nav-number">1.</span> <span class="nav-text">React Native中Flex布局</span></a></li></ol></div>
            
          </div>
          <div class="post-toc-indicator-bottom post-toc-indicator">
            <i class="fa fa-angle-double-down"></i>
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="icon-next-heart fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">窦静轩</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="http://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Muse
  </a>
</div>



      </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  


  



  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>

  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=0.5.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=0.5.0"></script>



  
  

  
  
<script type="text/javascript" src="/js/src/scrollspy.js?v=0.5.0"></script>

<script type="text/javascript" id="sidebar.toc.highlight">
  $(document).ready(function () {
    var tocSelector = '.post-toc';
    var $tocSelector = $(tocSelector);
    var activeCurrentSelector = '.active-current';

    $tocSelector
      .on('activate.bs.scrollspy', function () {
        var $currentActiveElement = $(tocSelector + ' .active').last();

        removeCurrentActiveClass();
        $currentActiveElement.addClass('active-current');

        $tocSelector[0].scrollTop = $currentActiveElement.position().top;
      })
      .on('clear.bs.scrollspy', function () {
        removeCurrentActiveClass();
      });

    function removeCurrentActiveClass () {
      $(tocSelector + ' ' + activeCurrentSelector)
        .removeClass(activeCurrentSelector.substring(1));
    }

    function processTOC () {
      getTOCMaxHeight();
      toggleTOCOverflowIndicators();
    }

    function getTOCMaxHeight () {
      var height = $('.sidebar').height() -
                   $tocSelector.position().top -
                   $('.post-toc-indicator-bottom').height();

      $tocSelector.css('height', height);

      return height;
    }

    function toggleTOCOverflowIndicators () {
      tocOverflowIndicator(
        '.post-toc-indicator-top',
        $tocSelector.scrollTop() > 0 ? 'show' : 'hide'
      );

      tocOverflowIndicator(
        '.post-toc-indicator-bottom',
        $tocSelector.scrollTop() >= $tocSelector.find('ol').height() - $tocSelector.height() ? 'hide' : 'show'
      )
    }

    $(document).on('sidebar.motion.complete', function () {
      processTOC();
    });

    $('body').scrollspy({ target: tocSelector });
    $(window).on('resize', function () {
      if ( $('.sidebar').hasClass('sidebar-active') ) {
        processTOC();
      }
    });

    onScroll($tocSelector);

    function onScroll (element) {
      element.on('mousewheel DOMMouseScroll', function (event) {
          var oe = event.originalEvent;
          var delta = oe.wheelDelta || -oe.detail;

          this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
          event.preventDefault();

          toggleTOCOverflowIndicators();
      });
    }

    function tocOverflowIndicator (indicator, action) {
      var $indicator = $(indicator);
      var opacity = action === 'show' ? 1 : 0;
      $indicator.velocity ?
        $indicator.velocity('stop').velocity({
          opacity: opacity
        }, { duration: 100 }) :
        $indicator.stop().animate({
          opacity: opacity
        }, 100);
    }

  });
</script>

<script type="text/javascript" id="sidebar.nav">
  $(document).ready(function () {
    var html = $('html');
    var TAB_ANIMATE_DURATION = 200;
    var hasVelocity = $.isFunction(html.velocity);

    $('.sidebar-nav li').on('click', function () {
      var item = $(this);
      var activeTabClassName = 'sidebar-nav-active';
      var activePanelClassName = 'sidebar-panel-active';
      if (item.hasClass(activeTabClassName)) {
        return;
      }

      var currentTarget = $('.' + activePanelClassName);
      var target = $('.' + item.data('target'));

      hasVelocity ?
        currentTarget.velocity('transition.slideUpOut', TAB_ANIMATE_DURATION, function () {
          target
            .velocity('stop')
            .velocity('transition.slideDownIn', TAB_ANIMATE_DURATION)
            .addClass(activePanelClassName);
        }) :
        currentTarget.animate({ opacity: 0 }, TAB_ANIMATE_DURATION, function () {
          currentTarget.hide();
          target
            .stop()
            .css({'opacity': 0, 'display': 'block'})
            .animate({ opacity: 1 }, TAB_ANIMATE_DURATION, function () {
              currentTarget.removeClass(activePanelClassName);
              target.addClass(activePanelClassName);
            });
        });

      item.siblings().removeClass(activeTabClassName);
      item.addClass(activeTabClassName);
    });

    $('.post-toc a').on('click', function (e) {
      e.preventDefault();
      var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
      var offset = $(targetSelector).offset().top;
      hasVelocity ?
        html.velocity('stop').velocity('scroll', {
          offset: offset  + 'px',
          mobileHA: false
        }) :
        $('html, body').stop().animate({
          scrollTop: offset
        }, 500);
    });

    // Expand sidebar on post detail page by default, when post has a toc.
    NexT.motion.middleWares.sidebar = function () {
      var $tocContent = $('.post-toc-content');

      if (CONFIG.sidebar === 'post') {
        if ($tocContent.length > 0 && $tocContent.html().trim().length > 0) {
          NexT.utils.displaySidebar();
        }
      }
    };
  });
</script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=0.5.0"></script>



  



  



  
  

  
  


</body>
</html>
